<title>登录 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/animate.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">
<style>
    .signin-form .has-feedback {
        position: relative;
    }
    .signin-form .has-feedback .form-control {
        padding-left: 36px;
    }
    .signin-form .has-feedback .mdi {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        width: 36px;
        height: 36px;
        line-height: 36px;
        z-index: 4;
        color: #dcdcdc;
        display: block;
        text-align: center;
        pointer-events: none;
    }
    .signin-form .has-feedback.row .mdi {
        left: 15px;
    }
</style>

<body class="center-vh" style="background-image: url({:HTTP_STATIC_ADMIN_CDN_URL}images/login-bg-2.jpg); background-size: cover;">
<div class="card card-shadowed p-5 mb-0 mr-2 ml-2">
    <div class="text-center mb-3">
        <a href="{:url('/admin/login')}"> <img alt="{:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'} admin" src="{:getSettingOptionsCache('base.web_site_logo_text') ?: HTTP_STATIC_CDN_URL . '/logo/logo-text.png'}" class="img-size-logo-text"> </a>
    </div>

    <form action="{:url('/admin/login')}" method="post" class="signin-form needs-validation" novalidate>
        <div class="mb-3 has-feedback">
            <span class="mdi mdi-account" aria-hidden="true"></span>
            <input type="text" class="form-control" name="username" id="username" placeholder="用户名" required>
        </div>

        <div class="mb-3 has-feedback">
            <span class="mdi mdi-lock" aria-hidden="true"></span>
            <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
        </div>

        <div class="mb-3 has-feedback row">
            <div class="col-7">
                <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                <input type="text" name="captcha" class="form-control" placeholder="验证码" required>
            </div>
            <div class="col-5 text-right">
                <img src="{:url('/admin/captcha')}" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
            </div>
        </div>

        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="rememberme">
                <label class="form-check-label not-user-select" for="rememberme">5天内自动登录</label>
            </div>
        </div>

        <div class="mb-3 d-grid">
            <button class="btn btn-primary" type="submit">立即登录</button>
        </div>
    </form>

    <p class="text-center text-muted mb-0">Copyright © 2022 <a href="javascript:;">{:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</a>. All right reserved</p>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<script type="text/javascript">
    $(function (){
        $('form').submit(function(){
            event.preventDefault();
        });
    });
    var loader;
    $('.signin-form').on('submit', function(event) {
        if ($(this)[0].checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
            $(this).addClass('was-validated');
            return false;
        }
        $("button:submit").html('登录中...').attr("disabled", true);
        loader = $('button:submit').lyearloading({
            opacity: 0.2,
            spinnerSize: 'nm'
        });
        post($(this).attr('action'), $(this).serialize()).success(res => {
            loader.destroy();
            $("button:submit").html('立即登录').attr("disabled", false);
            switch (res.code){
                case 200:
                    setTimeout(function () {
                        location.href = "{:url('/admin/index')}";
                    }, 1500);
                    break;
                case 204:
                    break;
                default :
                    $("#captcha").click();
            }
        }).error();
        return false;
    });
</script>
</body>
